<template>
  <div class="indexMainPage">
    <!-- 头部区域 -->
    <header :class="scrollActive ? 'scrollActived' : ''">
      <a-row
        class="header-row"
        type="flex"
        justify="space-between"
        align="middle"
      >
        <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="10">
          <div class="header-left">
            <router-link to="/home">
              <span class="header-logo">博客小栈</span>
            </router-link>
            <span class="header-txt">专注前端开发</span>
          </div>
          <div class="header-right" @click="showDrawer">
            <a-icon type="menu" style="font-size: 20px; color: #999" />
          </div>
          <a-drawer
            title="博客小栈"
            placement="right"
            :closable="false"
            :visible="visible"
            :after-visible-change="afterVisibleChange"
            @close="onClose"
            :bodyStyle="drawerBodyStyleObj"
          >
            <a-menu
              style="border: none"
              @click="xsMenuClicked"
              :selected-keys="[current]"
            >
              <a-menu-item :key="'tech'">
                <router-link to="/home/tech">
                  <a-icon type="experiment"></a-icon>
                  技术
                </router-link>
              </a-menu-item>
              <a-menu-item :key="'relax'">
                <router-link to="/home/relax">
                  <a-icon type="camera"></a-icon>
                  生活
                </router-link>
              </a-menu-item>
              <a-menu-item :key="'life'">
                <router-link to="/home/life">
                  <a-icon type="coffee"></a-icon>
                  资源
                </router-link>
              </a-menu-item>
            </a-menu>
          </a-drawer>
        </a-col>
        <a-col :xs="0" :sm="0" :md="12" :lg="8" :xl="6">
          <a-menu
            mode="horizontal"
            :selected-keys="[current]"
            :class="scrollActive ? 'header-menu scrollActived' : 'header-menu'"
            theme="dark"
          >
            <a-menu-item :key="'tech'">
              <router-link to="/home/tech">
                <a-icon type="experiment"></a-icon>
                <span>技术</span>
              </router-link>
            </a-menu-item>
            <a-menu-item :key="'relax'">
              <router-link to="/home/relax">
                <a-icon type="camera"></a-icon>
                <span>生活</span>
              </router-link>
            </a-menu-item>
            <a-menu-item :key="'life'">
              <router-link to="/home/life">
                <a-icon type="coffee"></a-icon>
                <span>资源</span>
              </router-link>
            </a-menu-item>
          </a-menu>
        </a-col>
      </a-row>
    </header>
    <!-- 中间内容区域 -->
    <section>
      <router-view></router-view>
    </section>
    <!-- 页脚 -->
    <footer>
      <div>技术栈：Vue + Ant Design + Nestjs + mysql</div>
      <div>https://gitee.com/tongyaozhang</div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 监听滚动
      scrollActive: false,
      // 抽屉显示隐藏
      visible: false,
      // 抽屉样式对象
      drawerBodyStyleObj: {
        padding: "24px 0",
      },
    };
  },
  computed: {
    current: function () {
      let searchResult = this.$route.path
        .split("/")
        .find((item) => item === "life" || item === "relax" || item === "tech");
      if (searchResult) {
        return searchResult;
      }
      return this.$route.path.split("/").pop();
    },
  },
  mounted() {
    window.addEventListener(
      "scroll",
      () => {
        let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        // console.log(scrollTop)
        if (scrollTop >= 40) {
          this.scrollActive = true;
        } else {
          this.scrollActive = false;
        }
      },
      true
    );
  },
  methods: {
    // 控制抽屉
    afterVisibleChange(val) {
      //console.log("visible", val);
    },
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    // 小屏菜单点击
    xsMenuClicked() {
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped>
// 整体布局
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: 0 1px 4px rgba(89, 90, 89, 0.28);
  transition: all 0.3s;
  z-index: 9;
}
.indexMainPage {
  min-height: 100vh;
}
footer {
  position: sticky;
  top: 100vh;
  width: 100%;
  height: 100px;
  background-color: #1b1c1d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
}
// 滚动
.scrollActived {
  background-color: #fff;
  /deep/ span,
  i {
    color: rgba(0, 0, 0, 0.65) !important;
    font-weight: bold;
  }
  .header-logo {
    color: #1e90ff !important;
    font-weight: 400;
  }
}
.header-row {
  height: 100%;
  max-width: 1200px;
  margin: auto;
  .ant-col:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 15px;
    .header-right {
      display: none;
      cursor: pointer;
    }
  }
}
.header-logo {
  color: #1e90ff;
  font-size: 22.4px;
}
.header-txt {
  font-size: 9.6px;
  color: #999;
  display: inline-block;
  padding-left: 4.8px;
}
.header-menu {
  display: flex;
  justify-content: center;
  /deep/ span,
  i {
    color: #fff;
  }
  background-color: transparent;
  border-bottom: none;
}
// 响应式布局
@media screen and (max-width: 768px) {
  .header-row {
    .ant-col:nth-child(1) {
      .header-right {
        display: block;
      }
    }
  }
  // 小屏幕上padding
  .indexMainPage {
    padding-top: 63px;
  }
}
</style>
<style lang="less">
// 全局轮播图
.ant-carousel {
  width: 100%;
  height: 100%;
  .slick-slider {
    width: 100%;
    height: 100%;
    .slick-list {
      width: 100%;
      height: 100%;
      .slick-track {
        width: 100%;
        height: 100%;
        .slick-slide {
          width: 100%;
          height: 100%;
          div {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>